<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

      

        .box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
            overflow: hidden;
            margin-left: 500px;
            margin-top: 500px;
            position: relative;
        }

        .sub {
            width: 100px;
            height: 100px;
            background-color: #f00;
            margin: 50px;
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="sub">

        </div>
    </div>
</body>
<script>
    // 事件对象  => 事件触发时的相关信息(浏览器给的)
    // 相关信息: 什么时间 执行了什么类型的事件 谁触发   组合键(ctrl alt shift meta 是否被按下)  鼠标(鼠标按键 鼠标位置)  键盘(按键 字符 键盘码 字符编码)等等 

    // 事件对象的兼容 (判断赋值)
    // var e = e ? e :window.event;
    // var e = e || window.event;

    // 事件对象的属性 (事件对象 => 对象 => 存在属性和方法)

    // 通用:
    // timeStamp    时间戳(了解)  => 从页面加载到事件触发,经过的事件
    // type         事件类型(click dblclick mousedown keydown keyup)
    // target       事件源(触发事件的元素  => 给父元素绑定事件,子(代)元素也可以触发 -> 为了知道是哪个元素触发的事件 -> 事件源)

    // ctrlKey    事件触发时,ctrl键是否被按下
    // altKey    事件触发时,alt键是否被按下
    // shiftKey    事件触发时,shift键是否被按下
    // metaKey    事件触发时,meta键是否被按下
    // 常用于组合键  ctrl + c  ctrl + v  ctrl+enter   

    // 鼠标相关
    // button    事件触发时按下的按键 (左:0 中:1 右:2 侧键:3 4)
    // buttons   (IE 了解)事件触发时按下的按键 (左:1  右:2  左右:3 中:4 左中:5 右中:6 左中右:7 )

    // clientX/clientY     事件触发时,鼠标相对于可视窗口左上角(浏览器窗口)的位置
    // x/y(了解)           事件触发时,鼠标相对于可视窗口左上角的位置
    // pageX/pageY         事件触发时,鼠标相对于页面(文档)左上角的位置
    
    // 换算关系 (火狐低版本 没有pageX pageY => 自己算  => 了解)
    // pageX = e.clientX+document.documentElement.scrollLeft;
    // pageY = e.clientY+document.documentElement.scrollTop;
    
    // screenX/screenY     (了解)事件触发时,鼠标相对于屏幕左上角的位置

    // offsetX/offsetY     事件触发时,鼠标相对于事件源的偏移


    var box = document.getElementsByClassName("box")[0];
    var sub = document.getElementsByClassName("sub")[0];

    box.onmousedown = function (e) { // this => 绑定事件的元素
        //  e   标准浏览器写法
        // window.event   IE低版本

        // 事件对象的兼容 (判断赋值)
        // var e = e ? e :window.event;
        var e = e || window.event;
        console.log(e);

        // 方法1:  (麻烦 => 不好判断)
        // var target = e.target; //事件源(box/sub)
        // console.log(target,sub,target === sub);
        // if(target === sub){
        //     var posX = e.offsetX + sub.offsetLeft;
        //     var posY = e.offsetY + sub.offsetTop;
        //     console.log(posX,posY);
        // }else{

        // }


        // 方法2: 
        // var posX = e.pageX - box.offsetLeft;
        // var posY = e.pageY - box.offsetTop;
        // console.log(posX,posY);


        // 方法3: 
        console.log(e.target,e.offsetX,e.offsetY);




       

    }






</script>

</html>